<template>
  <div class="container">
    <div class="select">
      <slot name="select"></slot>
    </div>
    <div class="header_btns">
      <el-button
        v-if="tableConfig?.operationVisible?.includes('create')"
        :icon="Plus"
        @click="create"
        type="primary"
        >新建
      </el-button>
      <el-upload
        v-if="tableConfig?.operationVisible?.includes('importFile')"
        class="upload"
        action="#"
        :show-file-list="false"
        :auto-upload="false"
        :on-change="handleChange"
        :http-request="uploadApproval"
      >
        <el-button type="primary" :icon="Upload">导入</el-button>
      </el-upload>
      <el-button
        v-if="tableConfig?.operationVisible?.includes('exportFile')"
        :icon="Download"
        @click="exportFile(multipleSelection)"
        type="primary"
        >导出</el-button
      >
      <el-popconfirm
        v-if="tableConfig?.operationVisible?.includes('batchOperation')"
        confirm-button-text="是的"
        cancel-button-text="取消"
        :icon="InfoFilled"
        icon-color="#626AEF"
        title="您确认要批量删除这些数据吗?"
        @confirm="batchOperation(multipleSelection)"
      >
        <template #reference>
          <el-button>批量操作</el-button>
        </template>
      </el-popconfirm>
    </div>
    <el-tag v-if="tableConfig.tip" :size="tableConfig.tip.size">
      <template #default>
        <div class="description">
          <i class="iconfont icon-infotip"></i>
          <span>已选择{{ multipleSelection.length }}项,服务调用总计：{{ tableData.length }}条</span>
          <el-link :underline="false" type="primary" class="clear" @click="clearAll">清空</el-link>
        </div>
      </template>
    </el-tag>
    <el-table
      :width="100"
      ref="multipleTableRef"
      :data="tableData"
      :max-height="tableConfig.maxHeight"
      :header-cell-style="{ background: '#f4f4f4', height: '3.125rem' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="tableConfig.selection" type="selection" width="55" />
      <el-table-column label="序号 " width="55" v-if="tableConfig.serialNumber">
        <template #default="scope"> {{ scope.$index + 1 }} </template>
      </el-table-column>
      <el-table-column
        v-for="item in tableColumn"
        :key="item"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :show-overflow-tooltip="item.showOverflowTooltip"
      >
        <template #default="scope" v-if="item.custom">
          <slot :name="item.custom.name" :data="scope.row[item.prop]"></slot>
        </template>
      </el-table-column>
      <el-table-column #default="scope" fixed="right" align="center" :width="rightWidth * 70">
        <el-button
          v-if="tableConfig?.operationVisible?.includes('detail')"
          type="primary"
          :disabled="isCommitValue"
          @click="detail(scope.row)"
          :icon="View"
        ></el-button>
        <el-button
          v-if="tableConfig?.operationVisible?.includes('editor')"
          type="primary"
          @click="editor(scope.row)"
          :icon="Edit"
        ></el-button>
        <el-popconfirm
          v-if="tableConfig?.operationVisible?.includes('remove')"
          confirm-button-text="是的"
          cancel-button-text="取消"
          :icon="InfoFilled"
          icon-color="#626AEF"
          title="您确认要删除此条记录吗?"
          @confirm="formConfig?.delete?.submit(scope.row)"
        >
          <template #reference>
            <el-button
              type="danger"
              color="#ff9105"
              :icon="DeleteFilled"
              :disabled="isCommitValue"
            ></el-button>
          </template>
        </el-popconfirm>
      </el-table-column>
    </el-table>
    <div class="slot_pagination">
      <el-pagination
        v-if="tableConfig.paginationConfig"
        :currentPage="pagination.current"
        :page-size="pagination.pageSize"
        :total="tableConfig?.paginationConfig.total"
        :page-sizes="[10, 5, 20]"
        :small="tableConfig?.paginationConfig.small"
        :disabled="tableConfig?.paginationConfig.disabled"
        :background="tableConfig?.paginationConfig.background"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <slot name="submit" :deleteItems="multipleSelection"></slot>
    </div>
  </div>
  <Create></Create>
  <Editor></Editor>
  <Detail></Detail>
</template>

<script setup>
  import { defineProps, ref, onMounted, provide, reactive } from 'vue';
  import { DeleteFilled, Plus, View, Edit, Upload, Download } from '@element-plus/icons-vue';
  import { ElMessage } from 'element-plus';
  import Create from './create.vue';
  import Editor from './editor.vue';
  import Detail from './detail.vue';

  const isCommitValue = ref(false);

  const multipleTableRef = ref();
  const multipleSelection = ref([]);
  const count = ref(0);
  const rightWidth = ref(0);
  const props = defineProps({
    tableData: {
      required: true,
      type: Array,
    },
    tableColumn: {
      required: true,
      type: Array,
    },
    tableConfig: {
      required: true,
      type: Object,
    },
    formConfig: {
      required: false,
      type: Object,
    },
  });

  const pagination = reactive({
    current: 1,
    pageSize: 10,
  });
  const handleCurrentChange = current => {
    pagination.current = current;
    props.query && props.query({ ...props.pagination });
  };
  const handleSizeChange = size => {
    pagination.pageSize = size;
    props.query && props.w({ ...props.pagination });
  };

  const handleSelectionChange = val => {
    multipleSelection.value = val;
    count.value = val.length;
  };
  const clearAll = () => {
    multipleTableRef.value?.clearSelection();
  };
  const batchOperation = items => {
    if (items.length) {
      props.formConfig?.batchOperation(items);
    } else {
      ElMessage.warning('请选择');
    }
  };
  const exportFile = items => {
    if (items.length) {
      props.formConfig?.exportFile(items);
    } else {
      ElMessage.warning('请选择文件');
    }
  };
  const uploadApproval = async option => {
    props.formConfig?.upload(option);
  };
  const handleChange = file => {
    uploadApproval(file);
  };

  const createVisible = ref(false);
  provide('createVisible', createVisible);
  provide('createFormData', props.formConfig?.create);
  const create = () => {
    if (props.formConfig?.create?.custom) {
      props.formConfig?.create?.customHandle();
    } else {
      createVisible.value = true;
    }
  };
  const closeCreate = () => {
    createVisible.value = false;
  };
  provide('closeCreate', closeCreate);

  const editorVisible = ref(false);
  provide('editorVisible', editorVisible);
  provide('editorFormData', props.formConfig?.editor);
  const editor = async data => {
    if (props.formConfig?.editor?.custom) {
      props.formConfig?.editor.customHandle(data.id);
    } else {
      if (props.formConfig?.editor?.requestData) {
        await props.formConfig?.editor.getEditor(data.id);
      } else {
        props.formConfig.editor && (props.formConfig.editor.form = data);
      }
      editorVisible.value = true;
    }
  };
  const closeEditor = () => {
    editorVisible.value = false;
  };
  provide('closeEditor', closeEditor);

  const detailVisible = ref(false);
  provide('detailVisible', detailVisible);
  provide('detailFormData', props.formConfig?.detail);
  const detail = async data => {
    if (props.formConfig?.detail?.custom) {
      props.formConfig?.detail.customHandle(data.id);
    } else {
      if (props.formConfig?.detail?.requestData) {
        await props.formConfig?.detail.getDetail(data.id);
      } else {
        props.formConfig.detail && (props.formConfig.detail.form = data);
      }
      detailVisible.value = true;
    }
  };
  const closeDetail = () => {
    detailVisible.value = false;
  };
  provide('closeDetail', closeDetail);

  onMounted(() => {
    rightWidth.value = props.tableConfig?.operationVisible.filter(item => {
      return ['detail', 'editor', 'remove'].includes(item);
    }).length;
  });
</script>
<style scoped lang="scss">
  .container {
    display: flex;
    flex-direction: column;

    .select {
      margin: 0.9375rem 0;
    }

    .el-table {
      margin: 1.25rem 0;
    }

    .slot_pagination {
      align-self: flex-end;
      transform: translate(-1.875rem, 0.625rem);
    }

    .header_btns {
      display: flex;
      align-items: center;

      .upload {
        margin: 0 0.625rem;
      }
    }
  }
</style>
